<template>
    <div class="header">
        <div class="person">
            <el-icon><view/></el-icon>
            <span>IT00ZYQ</span>
        </div>
        <div class="header-right">
            <el-button type="primary" @click="toIndex">首页</el-button>
            <el-button type="primary" v-if="!loginState" @click="loginVisible = true">登录</el-button>
            <el-button type="primary" v-if="loginState" @click="logout">注销</el-button>
            <el-button type="primary" v-if="loginState" @click="toEditor">发布文章</el-button>
            <el-button type="primary" v-if="loginState" @click="toSchedule">日程表</el-button>
        </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="登录" center v-model="loginVisible" width="30%">
        <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
            <el-form-item prop="username">
                <el-input v-model="param.username" placeholder="请输入账号">
                    <template #prepend>账号</template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="param.password"
                          @keyup.enter="submitForm()">
                    <template #prepend>密码</template>
                </el-input>
            </el-form-item>
            <div class="login-btn">
                <el-button type="primary" @click="submitForm()">登录</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script>
    import { useRouter } from "vue-router";
    import {userLogin} from "../../api";
    import {ElMessage} from "element-plus";
    import {inject, reactive, ref, onMounted} from "vue";
    export default {
        name: "Header",
        setup() {
            const activeIndex = "1";
            const loginVisible = ref(false);
            const reload  = inject("reload");
            const loginState = ref(false);

            onMounted(() => {
                if (localStorage.getItem("username")) {
                    loginState.value = true;
                }
            });

            // 用户名下拉菜单选择事件
            const router = useRouter();
            const handleCommand = (command) => {
                if (command === "logout") {
                    localStorage.clear();
                    router.push("/login");
                }
            };

            // 导航栏事件
            const handleSelect = (key, keyPath) => {
                console.log(key, keyPath);
            };

            // 前往MD编辑器
            const toEditor = () => {
                router.push('/editor');
            };

            // 前往首页
            const toIndex = () => {
                router.push('/index');
            };

            // 前往登录
            const toLogin = () => {
                router.push('/login');
            };

            // 前往日程表
            const toSchedule = () => {
                router.push('/schedule');
            };

            const param = reactive({
                username: "",
                password: "",
            });

            const rules = {
                username: [
                    { required: true, message: "请输入账号", trigger: "blur",},
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
            };
            const login = ref(null);
            const submitForm = () => {
                login.value.validate((valid) => {
                    if (valid) {
                        userLogin(param).then(res => {
                            if (res.code === 200) {
                                localStorage.setItem("username", res.data.username);
                                localStorage.setItem("id", res.data.id);
                                localStorage.setItem("token", res.data.token);
                                ElMessage.success("登录成功");
                                loginVisible.value = false;
                                loginState.value = true;
                                login.value = null;
                                reload();
                            } else  {
                                ElMessage.error(res.message);
                            }
                        })
                    } else {
                        ElMessage.error("请输入正确信息");
                    }
                });
            };

            const logout = () => {
                localStorage.removeItem("username");
                localStorage.clear();
                loginState.value = false;
                router.push("/");
                reload();
            };

            return {
                activeIndex,
                param,
                login,
                rules,
                loginVisible,
                loginState,
                logout,
                handleSelect,
                toEditor,
                toIndex,
                toLogin,
                toSchedule,
                submitForm,
                handleCommand
            }
        }
    }
</script>

<style scoped>
.header {
    color: aliceblue;
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid white;
    position: fixed;
    width: 100%;
    top: 0;
}
.person {
    display: inline-block;
    margin-left: 88px;
    margin-right: 188px;
    line-height: 59px;
    font-size: x-large;
    color: #80bbe7;
}
.header-right {
    display: inline-block;
    float: right;
    line-height: 59px;
    margin-right: 30px;
}
.header-right el-button {
    background-color: antiquewhite;
}
/*.header .logo {*/
/*    float: left;*/
/*    width: 250px;*/
/*    line-height: 70px;*/
/*}*/
.login-btn {
    text-align: center;
}
</style>